<script setup>
import { ref } from "vue";
//导入axios
import request from "../axois/axios.js";
//导入pinia
import { studentStateStore } from "../store/StudentInfo.js";

//路由的跳转工具
import { useRouter } from "vue-router";

import { ElMessage } from "element-plus";

const routers = useRouter();

const studentInfo = studentStateStore();
//定义变量
//学生账号
let studentAccounts = ref("");
//学生密码
let studentPasswords = ref("");

let nameShow = ref("");
let namePassword = ref("");

//账号格式检验
function checkStudentAccount() {
  //定义正则表达式
  var studentAccountReg = /^[1-9a-zA-Z]{1}[0-9a-zA-Z]{4,15}$/; //用户名变量的判断

  if (studentAccountReg.test(studentAccounts.value)) {
    //输入用户名合法
    nameShow.value = "Ok";
    return true;
  } else {
    nameShow.value = "账号格式不正确";
    return false;
  }
}

//密码格式检验
function checkStudentPassword() {
  //定义密码校验的正则表达
  var studentPasswordReg = /^[1-9a-zA-Z]{1}[0-9a-zA-Z]{4,15}$/;

  if (studentPasswordReg.test(studentPasswords.value)) {
    namePassword.value = "OK";
    return true;
  } else {
    namePassword.value = "密码格式不正确";
    return false;
  }
}
//发送请求到后端
async function sendInfo() {
  if (checkStudentAccount && checkStudentPassword) {
    //准备请求数据
    
    //发送数据
    let { data } = await request.post("/student/login", {
      studentAccount: studentAccounts.value,
      studentPassword: studentPasswords.value,
    });

    //根据data中的数据判断
    console.log(data);
    if (data.code == 200) {
      //登录成功
      // alert(data.message);
      var result = data.data;
      console.log("信息为:", result);
      // studentStateStore.studentId=result.studentId;
      // studentStateStore.studentName=result.studentName;
      // studentStateStore.studentAccount=result.studentAccount;
      // studentStateStore.studentPassword=result.studentPassword;
      // studentStateStore.studentLoginState=result.studentLoginState;

      studentInfo.setterStudentId(result.studentId);
      studentInfo.setterStudentName(result.studentName);
      studentInfo.setterStudentAccount(result.studentAccount);
      studentInfo.setterStudentPassword(result.studentPassword);
      studentInfo.setterStudentLoginState("1");
      studentInfo.settergetterStudentXueHao(result.studentXueHao);

      console.log(
        "学生信息:",
        studentInfo.studentId,
        studentInfo.studentAccount,
        studentInfo.studentLoginState,
        studentInfo.studentName,
        studentInfo.studentXueHao,
        studentInfo.studentPassword
      );

      ElMessage({
        message: "登录成功",
        type: "success"
      });
      //路由跳转

      routers.push("/page/classes");
    } else {
      ElMessage({
        message: data.message,
        type: "error",
      });
    }
  }
}

//接受数据路由跳转 设置登录状态
</script >

<template>
  <div class="login">
    <div id="login_b">
      <div id="title">
        <br />
        <h2>用户登录</h2>
      </div>
      <!--  登录界面-->
      <div id="content">
        <br />
        <br />
        <div class="inputUI">
          用 户 名 :
          <input
            @blur="checkStudentAccount"
            type="text"
            name="username"
            class="inp"
            id="inp_user"
            v-model="studentAccounts"
          />
          <span class="hint" id="hint_user" v-text="nameShow"></span>
        </div>
        <div class="inputUI">
          用户密码:
          <input
            @blur="checkStudentPassword"
            type="password"
            name="userpassword"
            class="inp"
            id="inp_pwd"
            v-model="studentPasswords"
          />
          <span class="hint" id="hint_pwd" v-text="namePassword"></span>
        </div>
        <div class="btnContent">
          <br />
          <br />
          <!-- <button  class="btnStyle">登录</button><br /> -->

          <el-button type="primary" @click="sendInfo" plain>登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>



<style>
@import "../public/css/login_css.css";
.login {
  width: 100%;
  height: 100%;
  background-image: url(../public/img/body_bg.jpg);
}
</style>